---
id: grid
title: Grid
---

import { Props } from '../../core/components';

`Grid` renders a design system grid. Use it only once, at the top of your react tree.

### Basic usage

```jsx live showCode
const App = () => {
  return (
    <StacksProvider>
      <Grid columns={12} margin={4} gutter={4} opacity={0.1} />
    </StacksProvider>
  )
}

render(<App />)
```

### Props

<Props
  data={[
    {
      name: 'columns',
      type: 'responsiveProp<int>',
      required: false,
      defaultValue: '8',
    },
    {
      name: 'margin',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: '2',
    },
    {
      name: 'gutter',
      type: 'responsiveProp<float>',
      required: false,
      defaultValue: '2',
    },
    {
      name: 'opacity',
      type: 'float',
      required: false,
      defaultValue: '0.2',
    },
  ]}
/>
